<template>
    <div class="detail">
        <van-image width="100vw" height="4.75rem" :src="$pre + info.img" />
        <div class="detailOne" style="width:100vw">
            <span>
                <b>￥</b>
                {{ info.price }}
            </span>
            <span>￥{{ info.market_price }}</span>
        </div>
        <div class="p">{{ info.goodsname }}</div>
        <div v-html="info.description"></div>

        <!-- 底部 -->
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" />
            <van-goods-action-icon icon="cart-o" text="购物车" badge />
            <van-goods-action-icon icon="shop-o" text="店铺" badge />
            <van-goods-action-button
                type="warning"
                text="加入购物车"
                class="van-goods-1"
                @click="show = true"
            />
            <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>

        <!-- 弹出层 -->
        <van-popup v-model="show" position="bottom" :style="{ minHeight: '30%' }">
            <div class="tanchuImg">
                <img :src="$pre + info.img" alt />
            </div>
            <h4 class="text-primary h3">{{ info.specsname }}</h4>
            <van-button
                v-for="(item, index) in info.specsattr"
                :key="item"
                :type="index === n ? 'primary' : 'default'"
                @click="n = index"
            >{{ item }}</van-button>
            <hr />
            <van-button type="primary" @click="addShop">加入购物车</van-button>
        </van-popup>
    </div>
</template>

<script>
import { Toast } from "vant"
import { reqDetail, reqAddShop } from "../../http/api"
export default {
    data() {
        return {
            info: [],
            show: false,
            n: 0,
        }
    },
    mounted() {
        reqDetail({
            id: this.$route.params.id
        }).then((res) => {
            this.info = res.data.list[0];
            this.info.specsattr = this.info.specsattr.split(",")
        })
    },
    methods: {
        addShop() {
            reqAddShop({
                uid: JSON.parse(localStorage.getItem("isLogin")).uid,
                goodsid: this.$route.params.id,
                num: 1
            }).then((res) => {
                if(res.data.code==200){
                    Toast(res.data.msg)
                }
                this.show = false
            })
        }
    }
}
</script>

<style scoped lang="less">
@import url(../../less/index.less);
.detailOne span:nth-child(1) {
    color: red;
    font-weight: 500;
    font-size: 0.7rem;
    padding-left: 0.2rem;
    padding-right: 0.1rem;
    b {
        color: red;
    }
}
.detailOne span:nth-child(2) {
    text-decoration: line-through;
    font-size: 0.3rem;
}
.detail div:nth-child(3) {
    font-size: 0.4rem;
    padding-left: 0.2rem;
}
.detail div[data-v-5ee9087b]:nth-child(3) {
    font-size: 0.1rem;
}
</style>